<!doctype html>
<html lang="">
<head>
    <meta charset="utf-8">
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>switchboard project demo</title>
    <link rel="apple-touch-icon" href="apple-touch-icon.png">
    <!-- Place favicon.ico in the root directory -->
    <link rel="stylesheet" href="styles/main.css">
</head>
<body><!--[if lt IE 10]>
<p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade
    your browser</a> to improve your experience.</p>
<![endif]-->
<div id="page-container">
    <div class="header">
        <div class="header-left"><img src="images/logo.png"><h4>智能交换机云端管控</h4><span style="color: red">(当前交换机MAC:D4EE07CADC94)</span></div>
    </div>
    <div class="switch-panel js-switch-list">
        <!-- <div class="wan"><span class="icon-wan">1</span>
            <button class="btn btn-warning" type="button">查看</button>
            <button class="btn btn-info" type="button">确定</button>
        </div>
        <div class="wan"><span class="icon-wan active">2</span>
            <button class="btn btn-warning" type="button">查看</button>
            <button class="btn btn-info" type="button">确定</button>
        </div>
        <div class="wan"><span class="icon-wan">3</span>
            <button class="btn btn-warning" type="button">查看</button>
            <button class="btn btn-info" type="button">确定</button>
        </div>
        <div class="wan"><span class="icon-wan">4</span>
            <button class="btn btn-warning" type="button">查看</button>
            <button class="btn btn-info" type="button">确定</button>
        </div>
        <div class="wan"><span class="icon-wan">5</span>
            <button class="btn btn-warning" type="button">查看</button>
            <button class="btn btn-info" type="button">确定</button>
        </div>
        <div class="wan"><span class="icon-wan">6</span>
            <button class="btn btn-warning" type="button">查看</button>
            <button class="btn btn-info" type="button">确定</button>
        </div>
        <div class="wan"><span class="icon-wan">7</span>
            <button class="btn btn-warning" type="button">查看</button>
            <button class="btn btn-info" type="button">确定</button>
        </div>
        <div class="wan"><span class="icon-wan">8</span>
            <button class="btn btn-warning" type="button">查看</button>
            <button class="btn btn-info" type="button">确定</button>
        </div>
        <div class="wan"><span class="icon-wan">9</span>
            <button class="btn btn-warning" type="button">查看</button>
            <button class="btn btn-info" type="button">确定</button>
        </div>
        <div class="wan"><span class="icon-wan">10</span>
            <button class="btn btn-warning" type="button">查看</button>
            <button class="btn btn-info" type="button">确定</button>
        </div>
        <div class="wan"><span class="icon-wan">11</span>
            <button class="btn btn-warning" type="button">查看</button>
            <button class="btn btn-info" type="button">确定</button>
        </div>
        <div class="wan"><span class="icon-wan">12</span>
            <button class="btn btn-warning" type="button">查看</button>
            <button class="btn btn-info" type="button">确定</button>
        </div>
        <div class="wan"><span class="icon-wan">13</span>
            <button class="btn btn-warning" type="button">查看</button>
            <button class="btn btn-info" type="button">确定</button>
        </div>
        <div class="wan"><span class="icon-wan">14</span>
            <button class="btn btn-warning" type="button">查看</button>
            <button class="btn btn-info" type="button">确定</button>
        </div>
        <div class="wan"><span class="icon-wan">15</span>
            <button class="btn btn-warning" type="button">查看</button>
            <button class="btn btn-info" type="button">确定</button>
        </div>
        <div class="wan"><span class="icon-wan">16</span>
            <button class="btn btn-warning" type="button">查看</button>
            <button class="btn btn-info" type="button">确定</button>
        </div>
        <div class="wan"><span class="icon-wan">17</span>
            <button class="btn btn-warning" type="button">查看</button>
            <button class="btn btn-info" type="button">确定</button>
        </div>
        <div class="wan"><span class="icon-wan">18</span>
            <button class="btn btn-warning" type="button">查看</button>
            <button class="btn btn-info" type="button">确定</button>
        </div>
        <div class="wan"><span class="icon-wan">19</span>
            <button class="btn btn-warning" type="button">查看</button>
            <button class="btn btn-info" type="button">确定</button>
        </div>
        <div class="wan"><span class="icon-wan">20</span>
            <button class="btn btn-warning" type="button">查看</button>
            <button class="btn btn-info" type="button">确定</button>
        </div>
        <div class="wan"><span class="icon-wan">21</span>
            <button class="btn btn-warning" type="button">查看</button>
            <button class="btn btn-info" type="button">确定</button>
        </div>
        <div class="wan"><span class="icon-wan">22</span>
            <button class="btn btn-warning" type="button">查看</button>
            <button class="btn btn-info" type="button">确定</button>
        </div>
        <div class="wan"><span class="icon-wan">23</span>
            <button class="btn btn-warning" type="button">查看</button>
            <button class="btn btn-info" type="button">确定</button>
        </div>
        <div class="wan"><span class="icon-wan">24</span>
            <button class="btn btn-warning" type="button">查看</button>
            <button class="btn btn-info" type="button">确定</button>
        </div> -->
    </div>
</div>
<div class="layer">
    <div class="dialog">
        <div class="dialog-header"><span class="icon-close close"></span></div>
        <div class="dialog-body">
            <table>
                <thead>
                <tr>
                    <th>状态</th>
                    <!--<th>最大功率(瓦)</th>-->
                    <!--<th>使用功率(瓦)</th>-->
                    <th>连接AP MAC</th>
                </tr>
                </thead>
                <tbody>
                <tr>
                    <td class="status"></td>
                    <td class="macs"></td>
                    <!--<td>1.9</td>-->
                    <!--<td>398.1</td>-->
                </tr>
                <tr>
                    <td></td>
                    <td></td>
                    <!--<td></td>-->
                    <!--<td></td>-->
                </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>
<script src="scripts/jquery.js"></script>
<script>
function initPage () {
    $.ajax({
        url: 'init',
        type: 'GET',
        dataType: 'json',
    })
    .done(function(data) {
        if(data) {
            var status = data.status;
            var len = data.num *1;
            for(var i = 0; i < len; i++) {
                var str = '';
                    str += '<div class="wan" data-port="'+ (i + 1) +'" data-status="' + status[i] + '"><span class="icon-wan '+ ((status[i]*1 == 1)?"active":"") +'">' + (i + 1) +'</span>';
                    str += '<button class="btn btn-warning btn-detail" type="button">查看</button>';
                    str += '<button class="btn btn-setport '+ ((status[i]*1 == 1)?"":"btn-info") +'" type="button">'+ ((status[i]*1 == 1)?"关闭":"开启") +'</button>';
                    str += '</div>';
                $(".js-switch-list").append(str);
            }
        }
        
    })
    .fail(function() {
        console.log("error");
    })
    .always(function() {
        console.log("complete");
    });
    
}

    $(function () {
        
        // 初始页面
        initPage();

        // 查看
        $(document).on("click", ".btn-detail", function () {
            var port = $(this).closest('.wan').attr("data-port");
            $(".layer").show();
            $.ajax({
                url: 'queryByport',
                type: 'POST',
                dataType: 'json',
                data: {port: port},
            })
            .done(function(data) {
                if(data) {
                    $(".layer .status").html(data.status);
                    var len = data.ap.length;
                    for(var i = 0; i < len; i ++) {
                        $(".layer .macs").append(data.ap[i]);
                    }
                }
                console.log("success");
            })
            .fail(function() {
                console.log("error");
            })
            .always(function() {
                console.log("complete");
            });
            
        });
        // 关闭弹框
        $(".close").click(function () {
            $(".layer").hide();
            $(".layer .status").html("");
            $(".layer .macs").html("");
        });

        // 开启/关闭
        $(document).on("click", ".btn-setport", function() {
            var port = $(this).closest('.wan').attr("data-port");
            var status = $(this).closest('.wan').attr("data-status");
            var operator = ((status*1 == 1)?0:1);
            $.ajax({
                url: 'setPort',
                type: 'POST',
                dataType: 'text',
                data: {port: port, operator: operator},
            })
            .done(function(data) {
//                if(data == "true") {
                    window.location.reload();
//                }
                console.log("success");
            })
            .fail(function() {
                console.log("error");
            })
            .always(function() {
                console.log("complete");
            });
            
        });
    })
 </script>
</body>
</html>